<template>
  <div>
    <f-form ref='form' :action='api.payment' :form-key='this.formItem.paymentId' :handlerName='handlerName' :file-ids='fileIds'>
      <div>
        <f-form-item label='支付金额' :required='true' data-type='number' disabled name='invoiceAmount' :value.sync='formItem.invoiceAmount' />
        <f-form-item label='发票号码' :required='true' name='invoiceNo' disabled :value.sync='formItem.invoiceNo' />
        <f-form-item label='开票日期' type='date' name='invoiceDate' disabled :required='true' :value='formItem.invoiceDate' />
        <f-form-item label='收款单位' name='invoiceUnitName' disabled :required='true' :value='formItem.invoiceUnitName' />
        <f-form-item label='收款银行' name='bankName' disabled :required='true' :value='formItem.bankName' />
        <f-form-item label='收款银行' name='bankNo' disabled :required='true' :value='formItem.bankNo' />
        <f-form-item label='支付日期' type='date' name='payDate' :required='true' :value='formItem.payDate' />
        <f-form-item label='支付账户' placeholder='请选择支付账户' name='payBankName' :readOnly='true' :required='true' :value.sync='formItem.payBankName' :trigger-change='true'>
          <a-tooltip slot='addonBefore' placement='top' title='点击图标选择'>
            <a-icon type='money-collect' style='cursor:pointer' @click='openBankModal' />
          </a-tooltip>
        </f-form-item>
        <f-form-item label='附件' type='upload' name='paymentImage' :file-group='2' :value='formItem.paymentImage' :file-max='3' :busId='this.formItem.paymentId' busType='BusPayment' :realRemove='false' @uploadSuccess='uploadSuccess' />
      </div>
    </f-form>
    <select-bank-modal ref='bankModal' @onSelectChange='onSelectBankChange'></select-bank-modal>
  </div>
</template>
<script>

import api from "../../../../js/api"
import SelectBankModal from "@/views/module/haiying/components/select_bank_modal"

export default {
  name: "InvoicePay",
  components: { SelectBankModal },
  data() {
    let me = this
    return {
      api: Object.assign(api, this.api),
      //列表初始化查询参数
      queryParam: {},
      loaded: false,
      handlerName: "hyInvoicePaymentPayHandler",
      bankName: "",
      bankNo: "",
      selectIds: "",
      fileIds: null,
      formItem: this.getFormItem()
    }
  },
  created() {
  },
  computed: {},
  methods: {
    getFormItem() {
      return {
        paymentId: "",
        amountDate: "",
        invoiceNo: "",
        invoiceName: "",
        invoiceDate: "",
        remark: ""
      }
    },
    setData(data) {
      if (data.paymentId) {
        this.$refs.form.resetFields()
        this.formItem = data
        this.http.get(this, {
          url: this.api.payment.get,
          params: {
            paymentId: data.paymentId,
            fileGroup: 2,
            handlerName: "hyInvoicePayInfoGetHandler"
          },
          success: (me, data) => {
            this.$nextTick(() => {
              this.formItem = data
            })
          }
        })
      }
    },
    /**
     * 选择收款银行
     */
    openBankModal() {
      this.$refs["bankModal"].open()
    },
    /**
     * 文件上传回调
     */
    uploadSuccess(fileUrl, files, fileIds, removeIds) {
      this.fileIds = fileIds
      this.removeIds.push(...removeIds)
    },
    /**
     * 银行选择回调
     */
    onSelectBankChange(selectedRowKeys, selectedRows) {
      this.$refs.form.getForm().setFieldsValue({ "payBankName": selectedRows[0].bankName + "(" + selectedRows[0].bankNo + ")" })
      this.formItem.payBankName = selectedRows[0].bankName
      this.formItem.payBankNo = selectedRows[0].bankNo
      this.formItem.payBankId = selectedRowKeys[0]
      this.$forceUpdate()
    },
    handleSubmit() {
      this.$refs["form"].submit({
        payBankId: this.formItem.payBankId,
        payBankName: this.formItem.payBankName,
        payBankNo: this.formItem.payBankNo
      }, this.handleSuccess)
    },
    handleSuccess() {
      this.$emit("closeDrawer", false)
    }
  }
}
</script>
